<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .root{
        width: 100%;
        height: 800px;
        background-color: aliceblue;
    }
    .div1{
        width: 800px;
        height: 100px;
        background-color:lightcoral
    }
    .div2{
        width: 800px;
        height: 100px;
        background-color: azure;
    }
    .zichu{
        width: 40px;
        height: 30px;
      
        background-color: coral;
    }
    .shouru{
        width: 40px;
        height: 30px;

        background-color: rgb(10, 169, 74);
    }
    .span{
        width: 5px;
        height: 5px;
        background-color: rgb(70, 12, 218);
    }

</style>
<body>
    <div class="root">
        <div>
            <div>
                <div>
                    <h2>记账本</h2>
                    <h2><a href="/jzbjl/jilu">添加账单</a></h2>
                </div>
                <hr/>
                <div>
                    <% xfjl.forEach(item => { %>
                    <div>
                        <div class="div1"><%= moment(item.time).format('YYYY-MM--DD') %></div>
                        <div class="div2">
                            <div><%= item.title %></div>
                            <div>
                                <span><%= item.type=== -1?'支出' : '收入' %></span>
                            </div>
                            <div><%= item.account %></div>
                            <div>
                                <a class="delBtn" href="/jzbshanchu/<%= item._id %>">
                                    <span class="span" aria-hidden="true">
                                        删除
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <% }) %>
                    <div>
                        <div>2023-04-05</div>
                        <div>
                            <div>抽烟只抽煊赫门，一生只爱一个人</div>
                            <div>
                                <span>支出</span>
                            </div>
                            <di>25元</di>
                            <div>
                                <span>
                                    
                                </span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>2023-04-05</div>
                        <div>
                            <div>抽烟只抽煊赫门，一生只爱一个人</div>
                            <div>
                                <span>支出</span>
                            </div>
                            <di>25元</di>
                            <div>
                                <span>
                                    
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    //获取所有的delBtn
    let delBtns = document.querySelectorAll('.delBtn');
    //绑定事件
    delBtns.forEach(item => {
        item.addEventListener('click',function(e){
            if(confirm('你确定要删除吗？')){
                return true;
            }else{
                //阻止默认行为
                e.preventDefault();
            }
        });
    })
    
        
</script>

</html>